<script setup>
import { ref ,onMounted} from 'vue'
import {getUser} from '@/api/user'
const formInline = ref({
  name: '',
  gender: '',
  page: 1,
  pageSize: 10,
  total: 0
})
const getUserList = async() => {
  let res = await getUser(formInline.value)
  userList.value = res.data.rows
  formInline.value.total = res.data.total
}
onMounted(() => {
  getUserList()
})
const userList = ref([])
const handleSizeChange = (val) => {
  formInline.value.pageSize = val
  formInline.value.page = 1
  getUserList()
}
const handleCurrentChange = (val) => {
  formInline.value.page = val
  getUserList()
}
</script>
<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.name" placeholder="请输入姓名" clearable />
    </el-form-item>
    <el-form-item label="性别" style="width: 140px">
      <el-select
        v-model="formInline.gender"
        placeholder="请选择"
        clearable
      >
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getUserList">查询</el-button>
    </el-form-item>
  </el-form>
  <br>
  <el-table :data="userList" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="gender" label="Gender" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.gender === 1">男</el-tag>
        <el-tag v-else>女</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="CreateTime"  />
  </el-table>
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 15,20, 25]"
      layout="total, sizes, prev, pager, next, jumper"
      :total=formInline.total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>
<style scoped></style>